<template>
  <div class="seating-class">
    <div class="seating-box">
      <div class="box-l">
        <div class="flex justify-between items-center top-cards">
          <div
            class="w-120px pt-6px pb-6px text-13px"
            :class="queryParams.status == init.id ? 'activeTab' : ''"
            v-for="init in tabMap"
            @click="selectTab(init.id)"
            :key="init.id"
            >{{ init.name }}({{ init.num }})</div
          >
        </div>
      </div>
      <div class="box-c">
        <!-- 登录状态 -->
        <div class="c-li" @click="operationSet('login')">
          <el-image
            :src="SLoginImg"
            v-if="agentStatus == 'login' || agentStatus == 'busy' || agentStatus == 'idle'"
          ></el-image>
          <el-image :src="LoginImg" v-else></el-image>
          <span
            :class="
              agentStatus == 'login' || agentStatus == 'busy' || agentStatus == 'idle'
                ? 'greens'
                : ''
            "
            >就绪</span
          >
        </div>
        <div class="c-li">
          <el-image
            v-if="agentStatus != 'logout'"
            :src="LogoutImg"
            @click="operationSet('logout')"
          ></el-image>
          <el-image v-else :src="SLogoutImg"></el-image>
          <span :class="agentStatus != 'logout' ? '' : 'greens'">离开</span>
        </div>
        <div class="c-li" @click="operationSet('busy')">
          <el-image :src="SBusyImg" v-if="agentStatus == 'busy'"></el-image>
          <el-image :src="BusyImg" v-else></el-image>
          <span :class="agentStatus == 'busy' ? 'greens' : ''">置忙</span>
        </div>
        <div class="c-li" @click="operationSet('idle')">
          <el-image :src="SIdleImg" v-if="agentStatus == 'idle'"></el-image>
          <el-image :src="IdleImg" v-else></el-image>
          <span :class="agentStatus == 'idle' ? 'greens' : ''">置闲</span>
        </div>
      </div>
      <div class="box-r">
        <ElDropdown trigger="click" @command="setPhoneMode">
          <div class="phone-icon-box">
            <Icon :size="12" class="!p-0" icon="fa:phone" />
            <div class="phone-icon-text ml-4px <lg:hidden">
              <span v-if="!phoneMode">选择话机</span>
              <span v-else>{{ phoneModeMap[phoneMode] }}</span>
            </div>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem v-for="item in phoneModeList" :key="item.value" :command="item.value">
                {{ item.name }}
              </ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
        <Microphone />
        <el-popover
          placement="bottom"
          :popper-style="{ minWidth: '60px !important', width: '60px' }"
          trigger="click"
        >
          <template #reference>
            <el-image
              class="w-20px h-20px"
              style="cursor: pointer"
              :src="Headset"
              title="设置来电提示音量"
            ></el-image>
          </template>
          <div class="w-40px flex justify-between items-center" style="flex-direction: column">
            <span class="mb-10px">{{ callVolume }}</span>
            <el-slider @change="setVolume" v-model="callVolume" vertical height="200px" />
            <el-tooltip effect="light" class="item" content="来电提示音量" placement="bottom">
              <el-image
                v-if="callVolume == 0"
                :src="NoVolume"
                @click="setVolumeValue(100)"
                style="cursor: pointer"
                class="w-20px h-20px mt-20px ml-6px"
              ></el-image>
              <el-image
                @click="setVolumeValue(0)"
                v-else
                style="cursor: pointer"
                :src="Volume"
                class="w-20px h-20px mt-20px ml-6px"
              ></el-image>
            </el-tooltip>
          </div>
        </el-popover>
      </div>
    </div>
    <el-row :gutter="10" class="seating-content">
      <el-col :span="5" style="height: 100%">
        <div class="tab-b">
          <div class="tab-box">
            <div
              style="height: 25px"
              class="w-full flex mb-10px pb-10px border-b-#eee border-b-1 border-b-solid justify-between"
            >
              <div style="cursor: pointer" class="w-50% flex items-center justify-left">
                <div class="mr-10px">
                  <el-tooltip effect="light" class="item" content="导入号码" placement="bottom">
                    <Icon
                      icon="ep:document-add"
                      size="18"
                      v-if="queryParams.status == 0"
                      @click="showAppend"
                    />
                  </el-tooltip>
                </div>
                <div class="mr-10px">
                  <el-tooltip effect="light" class="item" content="一键去重" placement="bottom">
                    <Icon
                      icon="ep:document-remove"
                      size="18"
                      v-if="queryParams.status == 0"
                      @click="removeRepeat"
                    />
                  </el-tooltip>
                </div>
                <div class="mr-10px">
                  <el-tooltip
                    effect="light"
                    class="item"
                    content="清除全部待拨打"
                    placement="bottom"
                  >
                    <Icon
                      color="#f56c6c"
                      icon="ep:delete"
                      size="18"
                      v-if="queryParams.status == 0"
                      @click="clearAll"
                    />
                  </el-tooltip>
                </div>
              </div>

              <div>
                <span class="text-12px mr-10px">自动连拨</span>
                <el-switch size="small" v-model="automaticValue" @change="setAutoMatic" />
              </div>
            </div>

            <div class="tabs-content" ref="containerRef" @scroll="handleScroll">
              <div
                class="tel-li"
                :class="changeTel == inits.id ? 'tel-active' : ''"
                v-for="(inits, idx) in list"
                :key="inits.id"
                @click="selectTel(inits.id, inits, idx)"
              >
                <div style="display: flex; align-items: center">
                  <el-tag :type="typeMap[inits.source]?.type" style="margin-right: 5px">{{
                    typeMap[inits.source]?.name
                  }}</el-tag>
                  {{ inits.number }}
                </div>
                <el-icon color="#bdbdbd" @click="closeTag(inits)"><Close /></el-icon>
              </div>
              <div
                v-if="list.length == 0"
                style="height: 100%; display: flex; justify-content: center; align-items: center"
              >
                <el-empty description="暂无数据"></el-empty>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="13" style="height: 100%">
        <div class="inter-content" style="height: 100%">
          <div class="inter-li">
            <div class="wrap-h">
              <div class="head">号码详情</div>
              <div class="head-content" v-if="detaillObj">
                <div class="head-li">
                  <span class="li-name">号码:</span>
                  <span class="li-content">{{ detaillObj?.number }}</span>
                </div>
                <div class="head-li">
                  <span class="li-name">名称:</span>
                  <span class="li-content" v-if="detaillObj?.source == 'import'">{{
                    detaillObj?.name
                  }}</span>
                  <span class="li-content" v-else>{{ multipleData?.name }}</span>
                </div>
                <div class="head-li">
                  <span class="li-name">来源:</span>
                  <span class="li-content">
                    <el-tag v-if="detaillObj.source" :type="typeMap[detaillObj?.source]?.type">{{
                      typeMap[detaillObj?.source]?.name
                    }}</el-tag>
                  </span>
                </div>
                <div class="head-li">
                  <span class="li-name">创建时间:</span>
                  <!-- 导入的创建时间 -->
                  <span class="li-content" v-if="detaillObj?.source == 'import'">{{
                    formatDate(detaillObj?.createTime)
                  }}</span>
                  <!-- 企业、线索、客户的创建时间 -->
                  <span class="li-content" v-else>{{ formatDate(multipleData?.createTime) }}</span>
                </div>
                <div class="head-li">
                  <span class="li-name">累计拨打:</span>
                  <span class="li-content">{{ multipleData?.callCount }}</span>
                </div>
                <div class="head-li">
                  <span class="li-name">上次拨打:</span>
                  <span class="li-content">{{ formatDate(multipleData?.lastCallTime) }}</span>
                </div>

                <div class="head-li">
                  <span class="li-name">上次跟进:</span>
                  <span class="li-content">{{ formatDate(multipleData?.contactLastTime) }}</span>
                </div>
                <div class="head-li" style="width: 66.66%">
                  <span class="li-name">备注:</span>
                  <span class="li-content" v-if="detaillObj?.source == 'import'">{{
                    detaillObj?.remark
                  }}</span>
                  <span class="li-content" v-else>{{ multipleData?.remark }}</span>
                </div>

                <div class="head-li" style="width: 100%">
                  <span class="li-name">标签:</span>
                  <span class="li-content">
                    <el-check-tag
                      v-for="tag in multipleTag"
                      :key="tag.id"
                      checked
                      :style="{
                        background: tag.bgColor,
                        color: tag.textColor,
                        marginRight: '4px',
                        padding: '4px 8px',
                        fontSize: '12px'
                      }"
                      class="mb-4px inline-block"
                      >{{ tag.name || tag.content }}</el-check-tag
                    >
                  </span>
                </div>
              </div>
              <div class="head-content" v-else>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>

                <div class="head-li-g">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
                <div class="head-li-g" style="width: 66.66%">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>

                <div class="head-li-g" style="width: 100%">
                  <span class="li-name-g"></span>
                  <span class="li-content-g"></span>
                </div>
              </div>
              <div class="operation" v-if="detaillObj">
                <el-button
                  class="primary"
                  @click="editTag"
                  v-if="
                    detaillObj?.source == 'clue' ||
                    detaillObj?.source == 'customer' ||
                    detaillObj?.source == 'ent'
                  "
                  >编辑标签</el-button
                >
                <el-button
                  @click="editData"
                  class="primary"
                  v-if="detaillObj?.source == 'clue' || detaillObj?.source == 'customer'"
                  >编辑资料</el-button
                >
                <el-button class="primary" @click="delConfirmCall">移除</el-button>
                <el-button
                  class="primary-plan"
                  @click="turnClue(null)"
                  v-if="detaillObj?.source == 'ent' || detaillObj?.source == 'import'"
                  >转线索</el-button
                >
                <el-button
                  class="primary-plan"
                  @click="turnCustomer(null)"
                  v-if="
                    detaillObj?.source == 'clue' ||
                    detaillObj?.source == 'ent' ||
                    detaillObj?.source == 'import'
                  "
                  >转客户</el-button
                >
                <el-button class="primary-blue" @click="onCall">拨号</el-button>
              </div>
              <div class="operation" v-else>
                <div class="operation-g"></div>
                <div class="operation-g"></div>
                <div class="operation-g"></div>
              </div>
            </div>
          </div>
          <div class="inter-lis">
            <div class="wrap-hh">
              <div class="head">通话记录</div>
              <div class="search-box">
                <div class="s-l">
                  <span>被叫号码:</span>
                  <el-input
                    v-model="queryParamsCall.callee"
                    placeholder="请输入被叫"
                    clearable
                    class="!w-260px"
                  />
                </div>
                <div class="s-r">
                  <el-button @click="handleQuery"
                    ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
                  >
                  <el-button @click="resetQuery"
                    ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
                  >
                </div>
              </div>
              <el-table
                :data="dataList"
                style="width: 100%"
                :height="tableHeight"
                v-loading="loading"
                border
              >
                <el-table-column label="号码" align="left" width="140px" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="text-12px">
                      <div>{{ scope.row.callee }}</div>
                      <div>
                        <!-- <el-tag v-if="scope.row.resultType == 1" type="success">呼叫成功</el-tag> -->
                        <el-tag v-if="scope.row.resultType == 1" type="success">呼叫成功</el-tag>
                        <el-tag v-else-if="scope.row.resultType == 10" type="warning"
                          >播放语音时挂断</el-tag
                        >
                        <el-tag v-else-if="scope.row.resultType == 11" type="warning"
                          >播放语音完挂断</el-tag
                        >
                        <div v-else>
                          <el-tag type="info">{{ resultTypeMap[scope.row.resultType] }}</el-tag>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="应答时间"
                  align="center"
                  prop="startTime"
                  show-overflow-tooltip
                  :formatter="dateFormatter"
                />
                <el-table-column
                  label="挂断时间"
                  align="center"
                  prop="endTime"
                  show-overflow-tooltip
                  :formatter="dateFormatter"
                />
                <el-table-column
                  label="时长(秒)"
                  align="center"
                  prop="callSecond"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="计费分钟"
                  align="center"
                  prop="callMinute"
                  show-overflow-tooltip
                />
                <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" align="center" width="140px" fixed="right">
                  <template #default="scope">
                    <el-button link type="primary" @click="openDetail(scope.row.id)">
                      详情
                    </el-button>
                    <el-button
                      link
                      type="primary"
                      @click="downloadAudio(scope.row)"
                      :disabled="!scope.row.recordUrl"
                    >
                      下载录音
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagin">
                <Pagination
                  :layout="(total, prev, pager, next, jumper)"
                  :total="total"
                  v-model:page="queryParamsCall.pageNo"
                  v-model:limit="queryParamsCall.pageSize"
                  @pagination="getCallList"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="height: 100%">
        <div class="call">
          <div class="call-top">
            <div class="call-card">
              <!-- 常驻 -->
              <div class="call-footer" v-if="!showHangupComing">
                <div>
                  <!-- <img :src="keyPad" alt="" class="w-24px h-24px" style="cursor: pointer" /> -->
                </div>
                <div class="switch-box">
                  <span class="title text-12px mr-10px">来电自动接起</span>
                  <el-switch size="small" v-model="autoAnswer" @change="setAutoAnswer" />
                </div>
              </div>
              <!-- incoming -->
              <template v-if="statusData && statusData.type == 'incoming'">
                <!-- 1.正在呼叫 -->
                <div class="h-100%" v-if="showHangupComing">
                  <div class="call-header">有电话进入,请注意接听</div>
                  <div class="call-content">
                    <div class="auto-box">自动群呼</div>
                    <h2>{{ statusData?.callee || '电话' }}</h2>
                    <div class="btn">
                      <el-button class="border-btn" type="danger" @click="onHangup">挂断</el-button>
                      <el-button class="border-btn" type="primary" @click="onAnswer"
                        >接听</el-button
                      >
                    </div>
                  </div>
                </div>
                <!-- 2.接起 -->
                <div class="h-100%" v-else>
                  <div class="call-content">
                    <div class="auto-box">
                      <span class="mr-3px">{{
                        statusData?.status == 'accepted' ? '通话中' : '通话时长'
                      }}</span>
                      <span class="time-box">{{ durationValue }}</span>
                    </div>
                    <h2>{{ statusData?.callee || '电话' }}</h2>
                    <div class="btn">
                      <el-button
                        v-if="statusData.status == 'accepted'"
                        class="border-btn"
                        type="danger"
                        @click="onHangup"
                        >挂断</el-button
                      >
                      <el-button v-else class="border-btn" link type="danger">已挂断</el-button>
                    </div>
                    <div class="tran-box">
                      <div v-if="writeDialog">
                        <el-button class="primary-plan" @click="turnClue(statusData.callee)"
                          >转线索</el-button
                        >
                        <el-button class="primary-plan" @click="turnCustomer(statusData.callee)"
                          >转客户</el-button
                        >
                        <el-button class="primary-black" @click="writeRemark">写备注</el-button>
                      </div>
                      <div v-else class="remark-box">
                        <el-input v-model.trim="incomingRemark" placeholder="请输入备注"></el-input>
                        <el-button class="primary-plan" type="primary" @click="appendRemark"
                          >保存</el-button
                        >
                        <el-button class="primary-black" type="primary" @click="writeDialog = true"
                          >取消</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- outgoing -->
              <template v-else>
                <div class="call-content" :class="!showHangup ? '' : 'het-100'">
                  <!-- 有外呼 -->
                  <template v-if="statusData">
                    <div
                      class="flex w-full justify-center items-center text-black"
                      :style="{ color: statusCom[statusData.status]?.color }"
                    >
                      <Icon :icon="statusCom[statusData.status]?.icon" class="mr-4px"></Icon>
                      {{ statusMap[statusData.status] }}
                    </div>
                    <h2>{{ statusData.callee }}</h2>
                    <div class="btn">
                      <!-- 
                        <el-button
                        v-if="!showHangup"
                        class="border-btn"
                        type="primary"
                        @click="onCall"
                        >呼叫</el-button
                        >
                      -->
                      <el-button
                        v-if="showHangup"
                        class="border-btn"
                        type="danger"
                        @click="onHangup"
                        >挂断</el-button
                      >
                    </div>
                  </template>
                  <!-- 无外呼 -->
                  <template v-else>
                    <el-empty description="暂无通话" :image-size="100"></el-empty>
                  </template>
                </div>
              </template>
            </div>
          </div>
          <div class="call-li">
            <ContentWrap class="h-b">
              <div class="position-relative">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="我的话术" name="call-records"></el-tab-pane>
                  <el-tab-pane label="群呼任务" name="call-task"></el-tab-pane>
                </el-tabs>
                <div v-if="activeName == 'call-records'" class="lang-box de-lang mb-10px">
                  <div v-for="(item, index) in speechList" :key="index">
                    <el-divider>{{ item.title }}</el-divider>
                    <div class="p-10px text-13px text-#333 bg-#eff3f6">
                      {{ item.content }}
                    </div>
                  </div>
                </div>
                <div
                  class="add-speech flex justify-center align-center"
                  v-if="activeName == 'call-records'"
                >
                  <el-button type="primary" @click="addSpeech" plain class="w-100%">
                    <Icon icon="ep:plus" class="mr-5px" />
                    添加话术
                  </el-button>
                </div>
                <div v-if="activeName == 'call-task'" class="lang-box des-lang">
                  <div v-for="item in agentTaskList" :key="item.id" class="task-li">
                    <el-descriptions :column="2">
                      <el-descriptions-item label="任务名称:">
                        {{ item.name }}
                      </el-descriptions-item>
                      <el-descriptions-item label="任务类型:">
                        <el-tag>{{ CallTypeEnumMap[item.type] }}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="任务状态:">
                        {{ CallTaskstatusEnumMap[item.status] }}
                      </el-descriptions-item>
                      <el-descriptions-item label="已呼数量:">
                        {{ item.callCount }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
              </div>
            </ContentWrap>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- ent转客户 -->
  <CustomerForm ref="customerFormRef" />
  <!-- ent转线索 -->
  <ClueForm ref="clueForRef" />
  <!-- crm详情 -->
  <CrmSpec ref="crmSpec" />
  <!--企业详情  -->
  <EnterpriseDetails ref="companyDetail" @refresh-val="detailRefreList" />
  <!-- 呼叫详情 -->
  <DetailDes ref="detailRef" />
  <!-- 导入号码 -->
  <AppendPhone ref="appendRef" @success="handleSuccess" />
  <!-- 企业编辑标签 -->
  <EditTagForm ref="editTagForm" @success="entEcho" />
  <!-- 线索编辑标签 -->
  <EditClueTag ref="editClueTagForm" @success="clueEcho" :moduleId="multipleData?.moduleId" />
  <!-- 客户编辑标签 -->
  <EditCustomerTag
    ref="editCustomerTagForm"
    @success="customerEcho"
    :module-id="multipleData?.moduleId"
  />
  <CallBoard />
  <!-- 添加话术-->
  <SpeechForm ref="speechRef" @success="getSpeechList" />
</template>

<script setup>
import EnterpriseDetails from '@/views/ent/components/EnterpriseDetaill/index.vue'
import { Plus, DeleteFilled, Close, MoreFilled } from '@element-plus/icons-vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
import { dateFormatter } from '@/utils/formatTime'
import WebPhone from '@/hooks/web/useCall'
import ClueForm from '@/views/crm/clue/ClueForm.vue'
import { formatDate } from '@/utils/formatTime'
import { usePhoneStore } from '@/store/modules/phone'
import LoginImg from '@/assets/img/login.png'
import SLoginImg from '@/assets/img/s-login.png'
import LogoutImg from '@/assets/img/logout.png'
import SLogoutImg from '@/assets/img/s-logout.png'
import BusyImg from '@/assets/img/busy.png'
import SBusyImg from '@/assets/img/s-busy.png'
import IdleImg from '@/assets/img/Idle.png'
import SIdleImg from '@/assets/img/s-Idle.png'
import keyPad from '@/assets/svgs/call.svg'
import ImportNumber from '@/assets/svgs/import-number.svg'
import DetailDes from '@/views/call/record/detail.vue'
import AppendPhone from './components/appendPhone.vue'
import Log from '@/utils/log'
import * as CustomerApi from '@/api/crm/customer'
import * as advanceApi from '@/api/ent/advanceSearch/index'
import * as ClueApi from '@/api/crm/clue'
import * as AgentApi from '@/api/call/agent'
import * as seatingApi from '@/api/call/seating/index'
import * as contactApi from '@/api/crm/contact'
import { Microphone } from '@/layout/components/Microphone'
import { CallBoard } from '@/layout/components/CallBoard'
import { RecordApi } from '@/api/call/record'
import EditTagForm from '@/views/ent/receivedata/editTagForm/index.vue'
import EditClueTag from '@/views/crm/clue/editTagForm/index.vue'
import EditCustomerTag from '@/views/crm/customer/editTagForm/index.vue'
import SpeechForm from '../speech/SpeechForm.vue'
import Headset from '@/assets/svgs/headset.svg'
import Volume from '@/assets/svgs/volume.svg'
import NoVolume from '@/assets/svgs/no-volume.svg'
import { useUserStore } from '@/store/modules/user'

const callVolume = ref(0)
const automaticValue = ref(false)
const callIndex = ref(0)
const writeDialog = ref(true)
const activeName = ref('call-records')
const message = useMessage() // 消息弹窗
const useStore = usePhoneStore()
const list = ref([])
const dataList = ref([])
const { t } = useI18n() // 国际化
/*记录分页*/
const queryParamsCall = reactive({
  pageNo: 1,
  pageSize: 10,
  callee: null,
  sceneType: 1,
  sortStr: JSON.stringify({ createTime: 'desc' })
})
/*时长*/
const durationValue = ref('00:00')
const timer = ref(null)
const total = ref(0)
/*分页*/
const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  status: 0
})
const phoneModeMap = {
  sip: 'SIP话机',
  recall: '双向回拨',
  box: '话机盒子',
  sim: '手机SIM卡'
}
const sourceMap = {
  ent: '企业大数据',
  clue: '线索',
  customer: '客户',
  contact: '联系人',
  none: '手拨'
}
const resultTypeMap = {
  1: '呼叫成功',
  10: '播放语音时挂断',
  11: '播放语音完挂断',
  90: '系统线路异常',
  91: '黑名单或拦截',
  92: '空号或号码错误',
  93: '客户拒接或挂断',
  94: '客户忙或未接听',
  95: '坐席忙线未接听',
  99: '呼叫失败'
}
const CallTypeEnumMap = {
  1: '普通群呼',
  2: '语音按键业务'
}

const CallTaskstatusEnumMap = {
  0: '执行完毕',
  1: '等待执行',
  2: '执行错误',
  4: '手动停止',
  9: '执行中'
}
const statusMap = {
  ringing: '呼叫中',
  progress: '呼叫中',
  accepted: '正在通话',
  reject: '客户拒接',
  cancel: '坐席挂断',
  failed: '呼叫失败',
  ended: '已挂断',
  missed: '系统繁忙'
}
const statusCom = {
  ringing: {
    icon: 'ep:phone',
    color: '#0052cc'
  },
  progress: {
    icon: 'ep:phone',
    color: '#0052cc'
  },
  accepted: {
    icon: 'ep:microphone',
    color: '#67C23A'
  },
  reject: {
    icon: 'ep:remove',
    color: '#F56C6C'
  },
  cancel: {
    icon: 'ep:switch-button',
    color: '#E6A23C'
  },
  failed: {
    icon: 'ep:remove',
    color: '#F56C6C'
  },
  ended: {
    icon: 'ep:switch-button',
    color: '#E6A23C'
  },
  missed: {
    icon: 'ep:refresh-right',
    color: '#909399'
  }
}
const phoneModeList = ref([
  {
    name: 'SIP话机',
    value: 'sip'
  },
  {
    name: '双向回拨',
    value: 'recall'
  },
  {
    name: '话机盒子',
    value: 'box'
  },
  {
    name: '手机SIM卡',
    value: 'sim'
  }
])
const typeMap = {
  clue: {
    name: '线索',
    type: ''
  },
  customer: {
    name: '客户',
    type: 'success'
  },
  ent: {
    name: '企业',
    type: 'info'
  },
  contact: {
    name: '联系人',
    type: 'warning'
  },
  import: {
    name: '导入',
    type: 'danger'
  },
  other: {
    name: '其他',
    type: 'danger'
  }
}
const value1 = ref(false)
const tabMap = ref([
  {
    name: '待拨打',
    num: 0,
    id: 0
  },
  {
    name: '已拨打',
    num: 0,
    id: 1
  }
])
const changeTel = ref(0)
const handleClick = () => {}
const detaillObj = ref(null)
/*选择tab*/
const selectTab = (tab) => {
  queryParams.pageNo = 1
  queryParams.status = tab
  isHave.value = false
  // detaillObj.value = null
  // changeTel.value = null
  getList()
}
const phoneMode = ref(null)
const onBtnClick = () => {
  useStore.setVisible(true)
}
const audioConstraints = {
  video: false,
  audio: {
    noiseSuppression: true,
    echoCancellation: true
  },
  logicalSurface: false
}
/*选择模式*/
const setPhoneMode = async (pm) => {
  try {
    if (pm == 'sip') {
      await navigator.mediaDevices.getUserMedia(audioConstraints)
    }
  } catch {
    ElMessage.warning('未识别到麦克风,请检查麦克风')
    return
  }
  await useStore.setPhoneMode(pm)
  phoneMode.value = pm
  // TODO  调用getChannelId方法，验证话机模式是否激活
  WebPhone.getInstance().reg()
}
/*顶部操作按钮*/
const operationSet = async (type) => {
  if (!phoneMode.value) {
    ElMessage.warning('请先登录话机')
    return
  }
  if (type == 'login') {
    await useStore.setPhoneMode(phoneMode.value)
    handleAgentChange('agentLogin', type)
  } else if (type == 'logout' && phoneMode.value == 'sip' && agentStatus.value != 'logout') {
    handleAgentChange('agentLogout', type)
  } else if (type == 'busy' && phoneMode.value == 'sip' && agentStatus.value != 'logout') {
    handleAgentChange('agentSetBusy', type)
  } else if (type == 'idle' && phoneMode.value == 'sip' && agentStatus.value != 'logout') {
    handleAgentChange('agentSetIdle', type)
  }
}
/*坐席状态变更操作*/
// TODO: 使用useCall.ts 调用对应的方法
const handleAgentChange = async (val, type) => {
  if (type == 'login') {
    WebPhone.getInstance().setLogin()
  } else if (type == 'logout') {
    WebPhone.getInstance().setLogout()
  } else if (type == 'busy') {
    WebPhone.getInstance().setBusy()
  } else if (type == 'idle') {
    WebPhone.getInstance().setIdle()
  }
}
/*选择tel*/
const selectTel = (id, item, idx) => {
  multipleData.value = null
  multipleTag.value = []
  changeTel.value = id
  callIndex.value = idx
  getCallDetail(id, item)
}
/*号码详情*/
const getCallDetail = async (id, item) => {
  detaillObj.value = await seatingApi.getList({ id })
  multipleDetail(item)
}
/*企业、线索、客户标签*/
const multipleTag = ref([])
/*企业、线索、客户get*/
const multipleData = ref(null)
const entId = ref(null)
/*企业、线索、客户的详情*/
const multipleDetail = async (item) => {
  if (item.source == 'clue') {
    multipleData.value = await ClueApi.getClue(item.sourceId)
    const result = await ClueApi.getClueTag({ ids: [item.sourceId] })
    multipleTag.value = result[item.sourceId] || []
  } else if (item.source == 'customer') {
    multipleData.value = await CustomerApi.getCustomer(item.sourceId)
    const result = await CustomerApi.getCustomerTag({ ids: [item.sourceId] })
    multipleTag.value = result[item.sourceId] || []
  } else if (item.source == 'contact') {
    multipleData.value = await contactApi.getContact(item.sourceId)
  } else if (item.source == 'ent') {
    multipleData.value = await advanceApi.companyGetOne({ cid: item.sourceId })
    multipleData.value.name = multipleData.value.companyInfo?.companyName
    multipleData.value.contactLastTime = multipleData.value.lastFollowTime
    multipleTag.value = []
    multipleData.value.numberList.map((init) => {
      if (init.number == item.number) {
        const { id, tagList, lastCallTime, remark, callCount, createTime } = init
        multipleTag.value = tagList
        entId.value = id
        multipleData.value.lastCallTime = lastCallTime
        multipleData.value.remark = remark
        multipleData.value.callCount = callCount
        multipleData.value.createTime = createTime
      }
    })
  }
}
/*删除*/
const closeTag = async (item) => {
  await message.delConfirm()
  await seatingApi.delCallee(item.id)
  message.success(t('common.delSuccess'))
  queryParams.pageNo = 1
  // 刷新列表
  await getList()
  if (list.value.length) {
    selectTel(list.value[0].id, list.value[0], 0)
  } else {
    detaillObj.value = null
    changeTel.value = null
  }
}
/*获取呼叫名单分页*/
const getList = async () => {
  const data = await seatingApi.pageList(queryParams)
  list.value = data.list
  tabMap.value[queryParams.status].num = data.total
}
const containerRef = ref(null)
const isHave = ref(false)
/*无限滚动*/
const handleScroll = async () => {
  const container = containerRef.value
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    if (isHave.value) return
    queryParams.pageNo += 1
    const data = await seatingApi.pageList(queryParams)
    tabMap.value[queryParams.status].num = data.total
    if (data.list.length != 0) {
      list.value = list.value.concat(data.list)
      isHave.value = false
    } else {
      isHave.value = true
    }
  }
}
const speechList = ref([])
/*话术列表*/
const getSpeechList = async () => {
  speechList.value = await seatingApi.speechList()
}
const speechRef = ref(null)
/*添加话术*/
const addSpeech = () => {
  speechRef.value.open('create')
}
const agentTaskList = ref([])
/*群呼任务列表*/
const getAgentTaskList = async () => {
  agentTaskList.value = await seatingApi.agentTaskList()
}
/*删除呼叫名单*/
const delConfirmCall = async () => {
  await message.delConfirm()
  await seatingApi.delCallee(detaillObj.value.id)
  message.success(t('common.delSuccess'))
  // 刷新列表
  await getList()
  if (list.value.length) {
    selectTel(list.value[0].id, list.value[0], 0)
  } else {
    detaillObj.value = null
    changeTel.value = null
  }
}
const clueForRef = ref(null)
/*非线索转线索*/
const turnClue = async (num) => {
  if (num) {
    clueForRef.value.openByEnt('create', num)
    return
  }
  if (detaillObj.value.source == 'ent' || detaillObj.value.source == 'import') {
    clueForRef.value.openByEnt('create', detaillObj.value.number)
  }
}
const customerFormRef = ref(null)
/*非客户转客户*/
const turnCustomer = async (num) => {
  if (num) {
    customerFormRef.value.open('create', null, num)
    return
  }
  if (detaillObj.value.source == 'clue') {
    await ElMessageBox.confirm(`确定将【${detaillObj.value.number}】转化为客户吗？`)
    await ClueApi.transformClue(detaillObj.value.sourceId)
    ElMessage.success(`转化客户【${detaillObj.value.number}】成功`)
    selectTel(detaillObj.value.id, detaillObj.value, callIndex.value)
  } else if (detaillObj.value.source == 'ent') {
    customerFormRef.value.openByEnt(detaillObj.value.sourceId, detaillObj.value.number)
  } else if (detaillObj.value.source == 'import') {
    customerFormRef.value.openByEnt(null, detaillObj.value.number)
  }
}
const incomingRemark = ref('')
/*写备注*/
const writeRemark = () => {
  incomingRemark.value = ''
  writeDialog.value = false
}
/*保存备注*/
const appendRemark = async () => {
  if (!incomingRemark.value) {
    ElMessage.error('请输入备注')
    return
  }
  const data = {
    reqNo: statusData.value.reqNo,
    remark: incomingRemark.value
  }
  await seatingApi.addRemark(data)
  ElMessage.success('保存成功!')
  incomingRemark.value = ''
  writeDialog.value = true
}
/*编辑资料*/
const editData = () => {
  if (detaillObj.value.source == 'clue') {
    clueForRef.value.open('update', detaillObj.value.sourceId)
  } else if (detaillObj.value.source == 'customer') {
    customerFormRef.value.open('update', detaillObj.value.sourceId)
  }
}
const editTagForm = ref(null)
const editClueTagForm = ref(null)
const editCustomerTagForm = ref(null)

/*回显企业标签*/
const entEcho = async () => {
  multipleData.value = await advanceApi.companyGetOne({ cid: detaillObj.value.sourceId })
  multipleTag.value = []
  multipleData.value.numberList.map((init) => {
    if (init.number == detaillObj.value.number) {
      multipleTag.value = init.tagList
      entId.value = init.id
    }
  })
}
/*回显线索标签*/
const clueEcho = async () => {
  const result = await ClueApi.getClueTag({ ids: [detaillObj.value.sourceId] })
  multipleTag.value = result[detaillObj.value.sourceId] || []
}
/*回显客户标签*/
const customerEcho = async () => {
  const result = await CustomerApi.getCustomerTag({ ids: [detaillObj.value.sourceId] })
  multipleTag.value = result[detaillObj.value.sourceId] || []
}
/*编辑标签*/
const editTag = () => {
  if (detaillObj.value.source == 'ent') {
    editTagForm.value.open('update', entId.value, multipleTag.value)
  } else if (detaillObj.value.source == 'clue') {
    editClueTagForm.value.open('update', detaillObj.value.sourceId, multipleTag.value)
  } else {
    editCustomerTagForm.value.open('update', detaillObj.value.sourceId, multipleTag.value)
  }
}
/*总局的session*/
const statusData = computed(() => {
  Log.success('session状态值', JSON.stringify(useStore.session))
  return useStore.session || null
})

/*接入呼叫*/
const showHangupComing = computed(() => {
  if (!statusData.value) {
    return false
  }
  return statusData.value.status == 'ringing' || statusData.value.status == 'progress'
})
/*外呼状态*/
const showHangup = computed(() => {
  if (!statusData.value) {
    return false
  }
  return (
    statusData.value.status == 'ringing' ||
    statusData.value.status == 'progress' ||
    statusData.value.status == 'accepted'
  )
})

// 一键去重
const removeRepeat = async () => {
  await seatingApi.removeRepeat()
  queryParams.pageNo = 1
  message.success('操作成功')
  await getList()
}
// 坐席状态取值： login,logout,busy,idle
const agentStatus = ref(null)
watch(
  () => useStore.agentStatus,
  (val) => {
    Log.info('坐席状态取值', val)
    agentStatus.value = val
  },
  { deep: true, immediate: true }
)
watch(
  () => useStore.getNeedCall,
  (val) => {
    // 外呼结束 或者失败  查看是否自动连拨号
    if (val) {
      useStore.setNeedCall(false)
      if (automaticValue.value && list.value[callIndex.value + 1]) {
        ElMessage.error('5秒钟之后,自动拨号下一位')
      }
      setTimeout(() => {
        if (automaticValue.value) {
          const callObj = list.value[callIndex.value + 1]
          if (callObj) {
            selectTel(callObj.id, callObj, callIndex.value + 1)
            WebPhone.getInstance().call({
              callee: callObj.number,
              source: callObj.source || null,
              sourceId: callObj.sourceId || null,
              fromUserList: 1,
              fromUserListId: callObj.id
            })
          }
        }
      }, 5e3)
    }
  },
  { deep: true, immediate: true }
)
/*坐席工号*/
const agentNumber = ref(null)
const getAgent = async () => {
  const res = await AgentApi.agentInfo()
  agentNumber.value = res.agentNumber
}
/*拨号*/
const onCall = () => {
  if (detaillObj.value) {
    WebPhone.getInstance().call({
      callee: detaillObj.value.number,
      source: detaillObj.value.source || null,
      sourceId: detaillObj.value.sourceId || null,
      fromUserList: 1,
      fromUserListId: detaillObj.value.id
    })
  }
}
/*挂断*/
const onHangup = () => {
  WebPhone.getInstance().hangup()
}
/*接听*/
const onAnswer = () => {
  WebPhone.getInstance().answer()
}
const autoAnswer = ref(false)
/*设置是否自动接通*/
const setAutoAnswer = () => {
  useStore.setAutoAnswer(autoAnswer.value)
}
const loading = ref(false)
/*重置*/
const resetQuery = () => {
  queryParamsCall.callee = null
  handleQuery()
}
/*搜索*/
const handleQuery = () => {
  queryParamsCall.pageNo = 1
  getCallList()
}
/*通话记录*/
const getCallList = async () => {
  loading.value = true
  try {
    const data = await RecordApi.getRecordPage(queryParamsCall)
    dataList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const crmSpec = ref(null)
const companyDetail = ref(null)
/** 线索的详情*/
const seeDetail = (item) => {
  if (item.source == 'none' || item.source == '') {
    return
  }
  // crm
  if (item.source == 'clue' || item.source == 'customer' || item.source == 'contact') {
    crmSpec.value.setDrawer(true, item.source, item.sourceId, [])
    // 企业大数据
  } else if (item.source == 'ent') {
    companyDetail.value.setDrawer(true, item.sourceId, null, null)
  }
}
const detailRefreList = () => {}
/*接通开始计时*/
const startTimer = () => {
  let seconds = 0
  timer.value = setInterval(() => {
    seconds++
    const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0')
    const secs = String(seconds % 60).padStart(2, '0')
    durationValue.value = `${minutes}:${secs}`
  }, 1000)
}
/*挂断结束计时*/
const stopTimer = () => {
  if (timer.value) clearInterval(timer.value)
}
watch(
  () => statusData.value,
  (value, oldValue) => {
    if (value?.type == 'incoming') {
      if (value.status == 'accepted') {
        startTimer()
      } else {
        stopTimer()
      }
    }
    if (value && value.reqNo && value.reqNo != oldValue?.reqNo) {
      AgentApi.getCustomerInfo({ reqNo: value.reqNo })
    }
  },
  { immediate: true, deep: true }
)
/** 打开详情*/
const detailRef = ref()
const openDetail = (id) => {
  detailRef.value.open(id)
}
/*下载录音*/
const downloadAudio = (row) => {
  if (row.recordUrl) {
    const link = document.createElement('a')
    link.href = row.recordUrl
    link.setAttribute('download', 'recording.mp4')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}
/*设置自动连拨*/
const setAutoMatic = () => {
  useStore.setAutomatic(automaticValue.value)
}
const appendRef = ref(null)
/*显示导入号码的弹窗*/
const showAppend = () => {
  appendRef.value.open()
}
/**清空全部待拨打*/
const clearAll = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm('确定要清除全部待拨打吗?')
    await seatingApi.delCallAll()
    message.success(t('common.delSuccess'))
    await getList()
    detaillObj.value = null
    changeTel.value = null
  } catch {}
}
/*刷新*/
const handleSuccess = async () => {
  setTimeout(async () => {
    queryParams.pageNo = 1
    await getList()
    if (list.value.length) {
      selectTel(list.value[0].id, list.value[0], 0)
    }
  }, 1e3)
}
const props = defineProps({
  screenWidth: Number,
  screenHeight: Number
})
/**设置接听音量*/
const setVolume = () => {
  useStore.setIncomVolume(callVolume.value)
}
/**禁音、非禁音*/
const setVolumeValue = (val) => {
  callVolume.value = val
  setVolume()
}
const tableHeight = computed(() => {
  if (props.screenWidth == 1768) {
    return '280px'
  } else if (props.screenWidth == 1680) {
    return '320px'
  } else if (props.screenWidth == 1600 && props.screenHeight > 900) {
    return '300px'
  } else if (props.screenWidth == 1600 && props.screenHeight <= 900) {
    return '240px'
  } else if (props.screenWidth == 1440 && props.screenHeight <= 900) {
    return '240px'
  } else if (props.screenWidth == 1400 && props.screenHeight == 1050) {
    return '330px'
  } else if (props.screenWidth == 1366 || props.screenWidth == 1360) {
    return '160px'
  } else if (props.screenWidth == 1280 && props.screenHeight == 1024) {
    return '320px'
  } else if (props.screenWidth == 1280 && props.screenHeight <= 720) {
    return '140px'
  } else if (props.screenWidth == 1280 && props.screenHeight <= 768) {
    return '160px'
  } else if (props.screenWidth == 1280 && props.screenHeight <= 800) {
    return '180px'
  } else if (props.screenWidth == 1280 && props.screenHeight <= 960) {
    return '280px'
  } else if (props.screenWidth == 1176) {
    return '120px'
  } else if (props.screenWidth == 1152) {
    return '220px'
  } else if (props.screenWidth == 1024) {
    return '140px'
  } else if (props.screenWidth == 800) {
    return '50px'
  } else {
    return '340px'
  }
})
onMounted(async () => {
  if (useUserStore().getSipMode == 'cm') {
    phoneModeList.value = [
      {
        name: '双向回拨',
        value: 'recall'
      },
      {
        name: '话机盒子',
        value: 'box'
      },
      {
        name: '手机SIM卡',
        value: 'sim'
      }
    ]
  }
  await getList()
  if (list.value.length) {
    selectTel(list.value[0].id, list.value[0], 0)
  }
  getSpeechList()
  getAgentTaskList()
  getAgent()
  getCallList()
})
watch(
  () => useStore.incomVolume,
  (val) => {
    callVolume.value = val
  },
  { deep: true, immediate: true }
)
watch(
  () => useStore.autoAnswer,
  (val) => {
    autoAnswer.value = val
  },
  { deep: true, immediate: true }
)
watch(
  () => useStore.phoneMode,
  (val) => {
    phoneMode.value = val
  },
  { deep: true, immediate: true }
)
watch(
  () => useStore.automatic,
  (val) => {
    automaticValue.value = val
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.phone-icon-box {
  display: flex;
  height: 24px;
  padding: 2px 10px;
  margin: 0 10px;
  color: white;
  background: var(--el-color-primary);
  border-radius: 4px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.seating-class {
  height: 100vh;
  background-color: #f5f7f9;
}
.seating-content {
  height: calc(100% - 90px);
}
.seating-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  height: 70px;
  margin-bottom: 20px;
  padding: 0 20px;
  border-radius: 4px;
  .box-l {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .box-c {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    .c-li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 30px;
      cursor: pointer;
      .c-li-box {
        background: #0052cc;
        width: 40px;
        height: 40px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .el-image {
        width: 24px;
        height: 24px;
      }
      span {
        font-size: 13px;
        margin-top: 7px;
        color: #000000;
      }
    }
  }
  .box-r {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.tab-b {
  height: calc(100% - 40px);
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  .tab-box {
    height: 100%;
    overflow: hidden;
    .tabs-content {
      height: calc(100% - 46px);
      overflow-y: auto;
      .tel-li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        cursor: pointer;
        border: 1px solid #fff;
        padding: 5px 10px;
        height: 28px;
      }
      .tel-active {
        color: #0052cc;
        border-left: 2px solid #0052cc;
        font-size: 18px;
      }
      &::-webkit-scrollbar {
        width: 2px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      &::-webkit-scrollbar-thumb {
        background: #d8d8d8;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #d8d8d8;
      }
      &::-webkit-scrollbar-thumb:horizontal:start {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:horizontal:end {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
    .tabs-icon {
      padding: 10px 0;
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tabs {
      display: flex;
      overflow-y: auto;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #d8d8d8;
      .tabs-li {
        width: 50%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #e4e7eb;
        border-radius: 4px;
        font-size: 14px;
        margin-right: 4px;
      }

      &::-webkit-scrollbar {
        width: 2px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      &::-webkit-scrollbar-thumb {
        background: #d8d8d8;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #d8d8d8;
      }
      &::-webkit-scrollbar-thumb:horizontal:start {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:horizontal:end {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
}

.inter-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .inter-li {
    height: 39%;
    .wrap-h {
      height: calc(100% - 40px);
      padding: 20px;
      background-color: #fff;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  .inter-lis {
    height: calc(61% - 50px);
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    .wrap-hh {
      height: 100%;
      position: relative;
      .search-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 0;
        .s-l {
          font-size: 14px;
          color: var(--el-text-color-regular);
          padding: 0 12px 0 0;
          span {
            padding: 0 12px 0 0;
          }
        }
      }
      .pagin {
        position: absolute;
        bottom: -16px;
        width: 100%;
        height: 40px;
        .el-pagination {
          margin: 0;
        }
      }
    }
  }
}
::v-deep .call {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .call-top {
    height: 39%;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    .call-card {
      width: 100%;
      height: 100%;
      .call-header {
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        border-bottom: 1px solid #e9ebef;
        color: #4f4f4f;
      }
      .call-content-in {
        width: 100%;
        height: calc(100% - 97px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .auto-box {
          padding: 5px 10px;
          background-color: #fec745;
          font-size: 14px;
          border-radius: 4px;
          color: #000000;
        }
        h2 {
          margin: 15px 0;
        }
      }
      .het-100 {
        height: 100% !important;
      }
      .call-content {
        width: 100%;
        height: calc(100% - 49px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        h2 {
          margin: 20px 0;
        }
        .auto-box {
          display: flex;
          align-items: center;
          justify-content: center;
          .time-box {
            background-color: #ecf5ff;
            color: #80cb5f;
            font-size: 14px;
            width: 60px;
            height: 26px;
            border-radius: 13px;
            text-align: center;
            line-height: 30px;
            margin-left: 3px;
          }
        }
        .tran-box {
          margin-top: 30px;
          width: 100%;
          display: flex;
          justify-content: center;
          .primary-plan {
            background-color: #f2f3f5;
            border: none;
            color: #165dff;
          }
          .primary-black {
            background-color: #f2f3f5;
            border: none;
            color: #000000;
          }
          .remark-box {
            width: calc(100% - 60px);
            padding: 0 30px;
            display: flex;
            align-items: center;
            .primary-plan {
              background-color: #f2f3f5;
              border: none;
              color: #165dff;
              margin-left: 10px;
            }
            .primary-black {
              background-color: #f2f3f5;
              border: none;
              color: #000000;
            }
          }
        }
      }
      .call-footer {
        width: calc(100% - 40px);
        height: 48px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        justify-content: space-between;

        .switch-box {
          display: flex;
          align-items: center;
          color: #555555;
          font-size: 16px;
          .title {
            height: 32px;
            line-height: 32px;
          }
        }
      }
    }
  }
  .call-li {
    height: 60%;
    .h-b {
      height: 100%;
      margin-bottom: 0 !important;
    }
  }
}
.operation {
  display: flex;
  justify-content: flex-end;
  .operation-g {
    width: 58px;
    height: 32px;
    border-radius: 4px;
    background-color: #f0f2f5;
    margin-left: 10px;
  }
  .primary {
    background-color: #f2f3f5;
    border: none;
    color: #626c7a;
  }
  .primary-plan {
    background-color: #f2f3f5;
    border: none;
    color: #165dff;
  }
  .primary-blue {
    background-color: #165dff;
    border: none;
    color: #fff;
  }
}
.head {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.head-content {
  display: flex;
  flex-wrap: wrap;
  .head-li {
    width: 33.33%;
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    .li-name {
      display: inline-block;
      width: 80px;
      text-align: right;
      color: #4e5969;
      font-size: 14px;

      margin-right: 5px;
    }
    .li-content {
      width: calc(100% - 80px);
      color: #8a8c91;
      font-size: 14px;
      white-space: nowrap;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 4px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      &::-webkit-scrollbar-thumb {
        background: #d8d8d8;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #b0b0b0;
      }

      &::-webkit-scrollbar-thumb:horizontal {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
    }
  }
  .head-li-g {
    width: 33.33%;
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .li-name-g {
      width: 80px;
      height: 30px;
      background-color: #f0f2f5;
      border-radius: 4px;
    }
    .li-content-g {
      width: calc(100% - 90px);
      height: 30px;
      background-color: #f0f2f5;
      border-radius: 4px;
    }
  }
}
@media screen and (max-width: 1400px) and (max-height: 1050px) {
  .des-lang {
    height: 380px !important;
  }
}
@media screen and (max-height: 900px) {
  .de-lang {
    height: 280px !important;
  }
  .des-lang {
    height: 300px !important;
  }
}
@media screen and (max-width: 1366px) {
  .de-lang {
    height: 200px !important;
  }
  .des-lang {
    height: 240px !important;
  }
}

@media screen and (max-width: 1600px) and (max-height: 1024px) {
  .de-lang {
    height: 340px !important;
  }
  .des-lang {
    height: 400px !important;
  }
}
@media screen and (max-width: 1600px) and (max-height: 900px) {
  .de-lang {
    height: 280px !important;
  }
  .des-lang {
    height: 320px !important;
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .de-lang {
    height: 200px !important;
  }
  .des-lang {
    height: 240px !important;
  }
}
@media screen and (max-width: 1280px) and (max-height: 1024px) {
  .de-lang {
    height: 320px !important;
  }
  .des-lang {
    height: 380px !important;
  }
}
@media screen and (max-width: 1280px) and (max-height: 800px) {
  .de-lang {
    height: 200px !important;
  }
  .des-lang {
    height: 260px !important;
  }
}
@media screen and (max-width: 1280px) and (max-height: 720px) {
  .de-lang {
    height: 170px !important;
  }
  .des-lang {
    height: 220px !important;
  }
}
@media screen and (max-width: 1176px) {
  .seating-class {
    transform: scale(0.95);
  }
}
.de-lang {
  height: 360px;
}
des-lang {
  height: 410px;
}
.lang-box {
  overflow-y: auto;
  .task-li {
    border: 1px solid var(--el-card-border-color);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    box-shadow: var(--el-box-shadow-light);
  }
  .add-speech {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
    left: 0;
  }
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:horizontal:start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:horizontal:end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.greens {
  color: #67c23a !important;
}
.border-btn {
  width: 100px;
  border-radius: 16px;
}

.top-cards {
  width: 300px;

  div {
    border: 1px solid #eee;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    &:hover {
      background: #0052cc;
      color: white;
    }
  }
  .activeTab {
    color: #0052cc;
    background-color: #fff;
    border: 1px solid #0052cc;
  }
}
</style>
